<template>
  <view class="topic">
    <view class="topic-box u-p-20">
      <navigator url="/pages/subpackages/topic/search/search" open-type="navigate" hover-class="none" class="topic-search u-m-b-30">
        <u-search bg-color="#fff" placeholder="搜索话题" :show-action="false" disabled placeholder-color="#999"></u-search>
      </navigator>
      <com-topic @followTopic="followTopic" :title-show="false" :topic-list="topicList"></com-topic>
    </view>
    <com-link-nav url="/pages/subpackages/topic/release/topic?type=1" title="发布内容" :bottom="120"></com-link-nav>
    <u-back-top :scroll-top="0" :bottom="120" :right="20" :icon-style="iconStyle" :custom-style="customStyle"></u-back-top>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      topicList: [],
      status: "loadmore",
      page: 1,
      pagesize: 15,
      scrollTop: 0,
      iconStyle: {
        fontSize: "40rpx",
        color: "#fff",
      },
      customStyle: {
        backgroundColor: "rgba(0, 0, 0, .6)",
      },
    };
  },
  computed: {
    ...mapState(["vuex_user_id", "vuex_identity", "vuex_power_01"]),
  },
  onLoad() {
    this.getTopicList();
  },
  methods: {
    // 获取话题列表
    getTopicList() {
      let data = {
        user_id: this.vuex_user_id,
        page: this.page,
      };
      this.$api.getTopicList(data).then((res) => {
        console.log(res);
        this.topicList = [...this.topicList, ...res.circle_discussion];
      });
    },
    // 关注话题
    followTopic(obj) {
      if (!this.vuex_user_id) return this.$t.goLogin();
      if (!this.vuex_power_01) return this.$t.goPower(1);
      let data = {
        user_id: this.vuex_user_id,
        selected_id: obj.id,
        guan: obj.status == 1 ? 2 : 1,
      };
      console.log(data);
      this.$api.followTopic(data).then((res) => {
        console.log(res);
        this.$u.toast(res.msg);
        if (res.code == 200) {
          this.topicList[obj.index].is_qgz = obj.status == 1 ? 2 : 1;
          this.topicList[obj.index].people =
            obj.status == 1 ? --obj.number : ++obj.number;
        }
      });
    },
  },
  onReachBottom() {
    if (this.page * this.pagesize > this.topicList.length)
      return (this.status = "nomore");
    this.status = "loading";
    this.page = ++this.page;
    setTimeout(() => {
      this.getTopicList();
      if (this.page * this.pagesize > this.topicList.length)
        this.status = "nomore";
      else this.status = "loading";
    }, 500);
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
};
</script>

<style lang="scss" scoped>
.topic {
  min-height: 100vh;
  /* #ifdef H5 */
  min-height: calc(100vh - 94px);
  /* #endif */
  background-color: $uni-bg-color-grey;
}
</style>
